<template>
  <div class="article-page">
    <van-nav-bar
      title="IT趣味头条"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      class="navBar-parts"
    />

    <!-- 加载动画 -->
    <div class="loading"  v-if="loading">
      <van-loading color="#ed3651" vertical >
        加载中...
      </van-loading>
    </div>

    <!-- 主页 -->
    <div class="mainArticle">
      <!-- 标题 -->
      <div class="articleTitle">
        <h3>{{detailsList.title}}</h3>
      </div>

      <!-- 头像 -->
      <section>
        <van-divider />

        <div class="articleInfo" v-if="!loading">
          <div class="userImg">
            <van-image
              fit="cover"
              round
              :src="detailsList.aut_photo"
            />
            <div class="userInfo">
              <span class="name">{{detailsList.aut_name}}</span>
              <span class="date">{{detailsList.pubdate | relativeTime}}</span>
            </div>
          </div>
          <div class="followBtn">
            <van-button color="#ed3651" round="">关注</van-button>
          </div>
        </div>
        <van-divider />
      </section>

      <!-- 文章内容 -->
      <div class="articleContent ">
        <div 
        class="textBox markdown-body" 
        v-html="detailsList.content"
        ref="articleImage"
        ></div>
       <van-divider v-if="!loading">正文结束</van-divider>
      </div>

      <!-- 评论区域 -->
      <div class="commentBox" v-if="!loading">
         <span class="commentTitle" id="pinglun">评论区</span>
         <commentList 
           :articleId="articleId"
           @commentNum="getCommentList"
           ref="commentList"
         />
      </div>

    </div>
    <!-- 底部功能区域 -->
    <div class="bottomFt">
      <van-button plain color="#999" round="" @click="popupShow = !popupShow">写评论</van-button>
      <van-icon name="chat-o" :badge="commentData" @click="tiaozhuan" />
      <van-icon 
      :name="detailsList.is_collected ? 'star' :'star-o'" 
      @click="CollectionsArticle" />
      <van-icon 
      :name="detailsList.attitude === 1 ? 'good-job' :'good-job-o'" 
      @click="onArticleLikings" 
      />
      <van-icon name="share" />
    </div>


    <div class="popupBox">
        <van-popup 
          v-model="popupShow"
          position="bottom"
        >
          <commentPost 
          @commentOnLoad="commentOnLoad"
          :articleId="articleId"
          />
        </van-popup>
     </div>
     
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import {getArticlesDetails,postArticleLikings,deleteArticleLikings,postCollectionsArticle,deleteCollectionsArticle } from '@/service/getDate'
import commentList from './children/commentList.vue'
import commentPost from './children/commentPost.vue'
export default {
  name: 'articlePage',
  data () {
    return {
       loading: false,  // 加载动画开关
       detailsList: [] , // 新闻详情数据
       commentData: null, // 小红点提示
       popupShow: false, // 评论区展示开关
       message:'', // 评论的内容
       getComment: [], // 评论后返回的数据
      //  likingsShow: false, // 文章点赞开关
    }
  },
  props: {
    // 路由器中传过来的参数
    articleId: {
      type: [Number,String,Object],
      required: true,
    }
  },
  created() {
    this.ArticlesDetails()
  },
  components: {
    commentList,
    commentPost
  },
  methods: {
   async ArticlesDetails() {
    this.loading = true
      try {
        const {data} = await getArticlesDetails(this.articleId)
        this.detailsList = data.data
        console.log(this.detailsList);

        // 由于数据驱动视图不是立即执行的，所以可以在文章初始化的时候添加一个延时器
        setTimeout(() => {
        this.articleDetails()
        }, 0)

      } catch(err) {
        console.log(err);
      }
      this.loading = false
    },

    // 渲染图片
    articleDetails() {
      const articleImageText = this.$refs.articleImage
      // console.log(articleImageText);
      const imgs = articleImageText.querySelectorAll('img')
      // console.log(imgs);
      const images = []
      imgs.forEach(img => {
        images.push(img.src)
        // console.log(images);
        // 给视图添加点击事件
        img.onclick = () => {
          ImagePreview({
            images:images,
            onClose() {
              //
            }
          })
        }
      })
    },

    // 评论图标小红点显示的数量
    getCommentList(val) {
      console.log(val.length);
      if(val.length > 99) this.commentData = val.length
      this.commentData = val.length
    },

   
    // 对文章进行点赞
    async onArticleLikings() {
      // this.likingsShow = !this.likingsShow
        console.log();
      try {
          if(this.detailsList.attitude !== 1) {
            await postArticleLikings({
            target:this.articleId
          })
          this.detailsList.attitude = 1 
          console.log(1);
        } else if(this.detailsList.attitude === 1) {
          await deleteArticleLikings(this.articleId)
          console.log(0);
          this.detailsList.attitude --
        } 
       } catch(err) {
        if(err.response.status === 401) {
          this.$toast.fail('账号未登录')
          // this.likingsShow = false
          return
        }
          this.$toast.fail('操作失败')
        
       }
    },

    // 收藏文章
    async CollectionsArticle() {
       try {
        if(!this.detailsList.is_collected) {
          await postCollectionsArticle({
          target:this.articleId
        })
        this.$toast.success('收藏成功')
        this.detailsList.is_collected = !this.detailsList.is_collected
        } else {
          await deleteCollectionsArticle(this.articleId)
          this.$toast.success('取消收藏')
          this.detailsList.is_collected = !this.detailsList.is_collected
        }
       } catch(err) {
        if(err.response.status === 401) {
          this.$toast.fail('账号未登录')
          // this.likingsShow = false
          return
        }
        this.$toast.fail('操作失败')
       }  
    },

    // 点击后跳转到评论区
    tiaozhuan() {
      this.$el.querySelector(".commentBox").scrollIntoView({block: "start", behavior: "smooth"});
      // 到达后红点自动消失
      this.commentData = null
    },

    // 评论后重新刷新评论区
    commentOnLoad() {
      this.$refs.commentList.onLoad()
    }
  },
  
}
</script>

<style lang="scss" scoped>
 @import './style/github-markdown.css';
 .article-page {
  padding-top: 92px;
  padding-bottom: 90px;
 .navBar-parts {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
   /deep/ .van-nav-bar__left {
    .van-icon,.van-nav-bar__text{
      color: #fff;
    }
  }
  }
 
  .loading {
    margin-top: 200px;
  }

  .mainArticle {
    margin: 0 10px;
    .articleTitle {
      margin: 25px 10px;
      font-size: 35px;
      font-weight:bold !important;
    }
    .articleContent {
      padding: 15px 20px;
    }
   /deep/ .van-divider {
      margin: 0;
    }
    .articleInfo {
      display: flex;
      justify-content: space-between;
      height: 100px;
      margin: 20px 30px;
     
      .followBtn {
        padding-top: 8px;
        .van-button {
          width: 180px;
          height: 70px;
          line-height: 70px;
        }
      }
      .userImg {
        display: flex;
        align-content: center;
        height: 100%;
        .van-image {
          width: 100px;
          height: 100px;
          margin-right: 20px;
        }
        .userInfo {
          display: flex;
          flex-flow: column;
          justify-content: space-around;
          .name {
            font-size: 35px;
          }
          .date {
            font-size: 33px;
            color: #999;
          }
        }
      }
    }
    .commentBox {
      .commentTitle {
        font-size: 30px;
        margin: 0 20px;
      }
    }
  }
  .popupBox {
   /deep/ .van-popup {
      height: 20%;
      padding-top: 50px;
    }
   }
 }
 .bottomFt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    padding:  0 20px;
    background-color: #f5f5f5;
    .van-button {
      width: 350px;
      height: 60px;
      line-height: 60px;
    }

  }
</style>